<template>
  <div>
    <div class="main-container">
      <div>
        <table id="example1" class="display table">
          <thead align="left">
          <tr class="sortable">
            <th align="center"><input type="checkbox" class="checkall" /></th>
            <th>ID</th>
            <th v-for="key in gridColumns">
              {{key}}
            </th>
          </tr>
          </thead>
          <tfoot>
          <tr>
            <th style="visibility:hidden"></th>
            <th style="visibility:hidden"></th>
            <th class="tfoot">名字</th>
            <th class="tfoot">科室</th>
            <th class="tfoot" id="hospital">医院</th>
            <th class="tfoot">院外影响力</th>
            <th class="tfoot">院内影响力</th>
            <th class="tfoot">机构影响力</th>
            <th class="tfoot">学术水平</th>
            <th class="tfoot">药企会议合作度</th>
            <th class="tfoot">KOL推广潜力</th>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import bus from '../../../bus';
  export default {
    components: {

    },
    data() {
      return {
        msg:"",
        gridColumns: ['姓名', '科室', '医院', '院外影响力', '院内影响力', '机构影响力', '学术水平', '药企会议合作度', 'KOL推广潜力'],
      }
    },
    created() {
      bus.$on('value7', msg => {
        this.msg = msg
      })
    },
    mounted: function () {
      this.table1();
    },
    methods: {
      table1() {
        /*表格*/
        $(document).ready(function () {
          // 设置-添加一个文本输入到每个页脚单元格
          $('#example1 tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input id="ipt" type="text" placeholder="搜索" />');
          });
          /*全选*/
          $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
          });
          //不显示任何错误信息
          $.fn.dataTable.ext.errMode = 'none';
          // 资料表
          var table = $('#example1').DataTable(
            {
              language:{
                "sSearch": "搜索:",
                "oPaginate": {
                  "sPrevious": "上一页",
                  "sNext": "下一页",
                }
              },
              "ajax": "http://tlpt.yutaolife007.com/huimeidata/localyHos",
              "columns": [
                {
                  "sClass": "text-center",
                  "data": "ID",
                  "render": function (data, type, full, meta) {
                    return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                  },
                  "bSortable": false
                },
                { "data": "id" },
                {
                  "data": "name",
                  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<a href="#/account/doctorXx">'+oData.name+"</a>");
                  },
                },
                { "data": "department" },
                { "data": "hospital" },
                { "data": "outEffect" },
                { "data": "inEffect" },
                { "data": "orgEffect" },
                { "data": "learningLevel" },
                { "data": "degreeCooperationMedical" },
                { "data": "kolExtensionForce" },
              ],
              columnDefs: [
                {
                  "width": "1px",
                  orderable: false,
                  className: 'select-checkbox',
                  targets: 0
                },
                {"width": "1px", "targets": 1},
                {"width": "10px", "targets": 2},
                {"width": "20px", "targets": 3},
                {"width": "100px", "targets": 4},
                {"width": "30px", "targets": 5},
                {"width": "30px", "targets": 6},
                {"width": "30px", "targets": 7},
                {"width": "30px", "targets": 8},
                {"width": "50px", "targets": 9},
                {"width": "40px", "targets": 10},
              ],
              dom: "Bfrtip",
              scrollY: true,
              buttons: ['colvis'],
              select: {
                style: 'os',
                selector: 'td:first-child'
              },
              order: [[1, 'asc']]
            },
          );
          // 应用搜索
          table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change', function () {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
          $('.dt-buttons>button>span').html("");
        });
      },
    },
  };
</script>

<style scoped>
  .main-container {
    margin-right: 50px;
    padding: 10px 15px 80px;
    background-color: rgba(245, 245, 248, 0.1);
    border-radius: 10px;
    -webkit-box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    background-image: url("../../../../assets/blur-bg-blurred.jpg");
    font-size: 14px;
  }
</style>
<style>
  .dt-button-collection>button:first-child{
    display: none!important;
  }
  a{
    color: #fff!important;
    text-decoration: none!important;
  }
  .table {
    width: 100%;
  }
  .scope {
    border-bottom: 1px solid #ddd;
  }
  .scope > td {
    padding: 0 8px;
    line-height: 35px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .scope > td > a {
    color: #fff;
    text-decoration: none;
  }
  thead {
    color: #fff;
  }
  .display>tbody {
    background-color: rgba(0, 0, 0, .15);
    color: #fff;
  }
  .display>tbody > tr {
    background-color: rgba(0, 0, 0, .15) !important;

  }
  .display>tbody > tr > td {
    background-color: rgba(0, 0, 0, .15) !important;
  }
  td{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tfoot{
    border-top: none !important;
  }
  .tfoot > input {
    width: 100%;
    padding: 3px;
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  #example1_filter > label > input {
    padding: 3px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  .dataTables_scrollBody{
    top: 45px!important;
    z-index: 99;
  }
  .dataTables_scrollFoot{
    position: absolute;
    top: 70px;
    z-index: 99;
  }
  #example1_info{
    display: none;
    z-index: 99;
  }
  #example1_paginate{
    position: relative;
    top: 55px;
    z-index: 99;
  }
  #example1_info, #example1_filter {
    color: #fff;
  }
  input::-webkit-input-placeholder {
    color: #fff;
  }
  #example1_paginate {
    color: #ffffff !important;
  }
  #example1_paginate > a {
    color: #fff !important;
  }
  .select-checkbox:before {
    border: 1px solid #fff !important;;
  }
  table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
  }
  th,td {
    white-space: nowrap;
  }
  .text-center{
    text-align: center;
  }
  .dt-buttons > button {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    margin-left:12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent url('../../../../assets/img/icon-hidden.png') center center / 20px no-repeat;
    color: #fff;
  }
  button.dt-button:hover:not(.disabled),
  button.dt-button:focus:not(.disabled),
  .dt-buttons > button:active:not(.disabled):hover:not(.disabled){
    background: transparent url('../../../../assets/img/icon-hidden.png') center center / 20px no-repeat;
    color: #fff;
    box-shadow: none;
    border-color: transparent!important;
  }
</style>
